import React, { useEffect } from 'react'
import { Card, Descriptions, Timeline, Table } from 'antd'
import useMsgDom from './useMsgDom'
import useScorll from '@/hooks/useScorll'
const Message: React.FC = () => {
  const { basicInfoItem, educationItem, workItem, projectItem, infoData } =
    useMsgDom()
  const { scrollToTop } = useScorll()
  useEffect(() => {
    scrollToTop()
  }, [])
  return (
    <>
      <Card>
        <Descriptions
          labelStyle={{ width: 110 }}
          title="个人基本信息"
          bordered
          items={basicInfoItem}
        />
      </Card>
      {infoData && (
        <Card style={{ marginTop: 20 }} title="教育经历">
          <Table
            dataSource={infoData.educationData}
            pagination={false}
            columns={educationItem}
          />
        </Card>
      )}
      <Card style={{ marginTop: 20 }} title="工作经历">
        <Timeline mode="alternate" items={workItem}></Timeline>
      </Card>
      {infoData && (
        <Card style={{ marginTop: 20 }} title="项目经验">
          <Table
            dataSource={infoData.projectdata}
            pagination={false}
            columns={projectItem}
            bordered
          />
        </Card>
      )}
      <Card style={{ marginTop: 20, fontSize: 16 }} title="自我评价">
        {infoData &&
          infoData.evaluateData.map((item, index) => <p key={index}>{item}</p>)}
      </Card>
      <Card style={{ marginTop: 20 }} title="写在最后">
        <div style={{ fontSize: 32, fontWeight: 700, textAlign: 'center' }}>
          {infoData && infoData.lastText}
        </div>
      </Card>
    </>
  )
}

export default Message
